<template>
    <div class="energy_box">
        <div class="enery_header">
            <img src="../assets/image/energy_bg.png" class="energy_bg">
        </div>
        <div class="energy_content">
            <mu-container class="energy_con" fluid>
                <mu-row gutter class="energy_date dd-clearfix">
                    <mu-col span="10" sm="10" md="10" lg="10">
                        <div class="energy_date_list dd-clearfix">
                            <mu-date-input  icon="today" color="#d4e2ef" underline-color="#d4e2ef" display-color="#0287b2" class="date_input dd-fl" v-model="value1" label="开始时间" type="date" label-float></mu-date-input>
                            <mu-date-input  icon="today" color="#d4e2ef" underline-color="#d4e2ef" display-color="#0287b2" class="date_input dd-fl" v-model="value2" label="结束时间" type="date" label-float></mu-date-input>
                            <div class="dd-fr">
                                <mu-select label="单位" class="dd-fl unit" label-float   v-model="normal.value1">
                                    <mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
                                </mu-select>
                                <mu-button color="#0287b2" class="dd-fl search">搜索</mu-button>
                            </div>
                        </div>
                    </mu-col>
                </mu-row>
                <mu-row gutter class="energy_echarts">
                    <mu-col span="5" sm="5" md="5" lg="5">
                        <div class="light_chart dd-fl">
                            <div :class="light_name" :id="light_id" :style="{height:lightheight,width:lightwidth}" ref="myEchart"></div>
                        </div>
                    </mu-col>
                    <mu-col span="5" sm="5" md="5" lg="5">
                        <div class="item_top">
                            <div :class="item_topname" :id="item_topid" :style="{height:topheight,width:topWidth}" ref="topEchart">
                            </div>
                        </div>
                        <div class="item_bottom">
                            <div :class="item_bottomname" :id="item_bottomid" :style="{height:bottomheight,width:bottomWidth}" ref="bottomEchart">
                            </div>
                        </div>
                    </mu-col>
                </mu-row>
            </mu-container>
        </div>
        <div class="back_footer">
            <img src="../assets/image/danger_bottom_bg.png" class="danger_bottom_bg">
            <div class="back_btn dd-fr" v-on:click="back">
                <img src="../assets/image/danger_btn.png">
                <span>返回主页</span>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {        
        props: {
            light_name: {
                type: String,
                default: 'lightclass'
            },
            light_id: {
                type: String,
                default: 'light'
            },
            lightwidth: {
                type: String,
                default: '100%'
            },
            lightheight: {
                type: String,
                default: '100%'
            },
            item_topname: {
                type: String,
                default: 'topclass'
            },
            item_topid: {
                type: String,
                default: 'topid'
            },
            topheight: {
                type: String,
                default: '100%'
            },
            topWidth: {
                type: String,
                default: '100%'
            },
            item_bottomname: {
                type: String,
                default: 'bottomclass'
            },
            item_bottomid: {
                type: String,
                default: 'bottomid'
            },
            bottomheight: {
                type: String,
                default: '100%'
            },
            bottomWidth: {
                type: String,
                default: '100%'
            },
        },
        data () {
            return {
                lightchart: null,
                options: [
                    '年', '月', '日', '季度',
                ],
                normal: {
                    value1: '',
                    value2: '',
                    value3: '',
                    value4: 'Option 1',
                    value5: 'Option 2'
                },
                finshshow: false,
                value1: undefined,
                value2: undefined,
            };
        },
        mounted() {
             this.initChart();
             this.inittopChart();
             this.initbottomChart();
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$refs.myEchart);
                //配置和数据
                this.chart.setOption({
                    title : {
                        text: '照明用电曲线图',
                        backgroundColor: 'rgba(0,0,0,0)',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                            color: '#c8e6fe'          // 主标题文字颜色
                        },
                    },                    
                    tooltip : {
                        trigger: 'axis'
                    },
                    color:['#1969b0'],
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#04223a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#c9e7ff'
                                }
                            },
                            data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],                   
                    yAxis : [
                        {
                            type : 'value',
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#04223a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#1969b0'
                                }
                            },
                        }
                    ],
                    series : [
                        {
                            name: "照明用电",
                            type: "line",
                            data: [100, 80, 120, 40, 80, 230, 164, 128, 256]
                        }
                    ]
                })
            },
            inittopChart() {
                this.chart = echarts.init(this.$refs.topEchart);
                //配置和数据
                this.chart.setOption({
                    title : {
                        text: '水量统计曲线图',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                            color: '#c8e6fe' // 主标题文字颜色
                        },
                    },                   
                    tooltip : {
                        trigger: 'axis'
                    },
                    grid:{
                        x:50,
                        y:35,
                        x2:30,
                        y2:30
                    },
                    color:['#1fbec1'],
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a'],
                                }                                                           
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#04223a'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c9e7ff'
                            }
                        },
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],                   
                    yAxis : [
                        {
                            type : 'value',
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#04223a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#1fbec1'
                                }
                            },
                        }
                    ],
                    series : [
                        {
                            name: "水量统计",
                            type: "line",
                            data: [100, 80, 120, 40, 80, 230, 164, 128, 190]
                        }
                    ]
                })
            },
            initbottomChart() {
                this.chart = echarts.init(this.$refs.bottomEchart);
                //配置和数据
                this.chart.setOption({
                    title : {
                        text: '空调用电曲线图',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                            color: '#c8e6fe'          // 主标题文字颜色
                        },
                    },                   
                    tooltip : {
                        trigger: 'axis'
                    },
                    grid:{
                        x:50,
                        y:35,
                        x2:30,
                        y2:30
                    },
                    color:['#5256ff'],
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#04223a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#c9e7ff'
                                }
                            },
                            data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],                   
                    yAxis : [
                        {
                            type : 'value',
                            splitLine: {
                                show: true, 
                                lineStyle: {
                                    color: ['#04223a']
                                }                            
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#04223a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#5256ff'
                                }
                            },
                        }
                    ],
                    series : [
                        {
                            name: "空调用电",
                            type: "line",
                            data: [100, 80, 120, 40, 80, 230, 164, 128, 200]
                        }
                    ]
                })
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
        }
    };
</script>


<style lang="scss">

//主题
@import '~@/assets/style/theme/default.scss';
//样式
@import '~@/assets/style/style.scss';

</style>